<template>
  <div class="city">
    <van-index-bar>
      <h1>热门城市</h1>
      <div class="bighot">
        <div class="hot" v-for="hots in detail.slice(0, 12)" :key="hots.id" @click="change(hots),$router.back()">
        <div class="hcity" >{{ hots.nm }}
        </div>
      </div>
      </div>
      <van-index-anchor index="A" />
      <div v-for="(item, index) in detail" :key="index" @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'a'" >{{ item.nm }}</div>
      </div>
      <van-index-anchor index="B" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'b'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="C" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'c'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="D" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'd'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="E" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'e'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="F" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'f'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="G" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'g'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="H" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'h'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="I" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'i'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="J" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'j'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="K" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'k'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="L" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'l'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="M" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'm'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="N" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'n'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="O" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'o'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="P" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'p'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="Q" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'q'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="R" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'r'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="S" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 's'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="T" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 't'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="U" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'u'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="V" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'v'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="W" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'w'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="X" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'x'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="Y" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'y'">{{ item.nm }}</div>
      </div>
      <van-index-anchor index="Z" />
      <div v-for="(item, index) in detail" :key="index"  @click="change(item),$router.back()">
        <div class="text" v-if="item?.py.slice(0, 1) == 'z'">{{ item.nm }}</div>
      </div>
    </van-index-bar>
  </div>
</template>
<script setup>
import { ref } from "vue";
import axios from "@/api/thisaxios.js";

const getDetail = () =>
  axios.get("https://apis.netstart.cn/maoyan/cities.json");



const detail = ref([]);
const hot = ref([]);
// const nane =ref([]);
async function update() {
  const { data } = await getDetail();
  detail.value = data.cts;
  // console.log("detail", detail);
  // nane.value = data.cts.py;
}
update();

const change=(item)=>{
  // console.log(item.id, item.nm);
  localStorage.setItem("cityId", item.id);
  localStorage.setItem("cityName", item.nm);
  // router.push({path: '/home'})
  // ,query: { id: item.id },
}


</script>

<style lang="scss" scoped>
.index-bar {
  position: relative;
  width: 100%;
  height: 100%;
}
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16rem;
  font-weight: bold;
  color: #333;
  background-color: #fefefe;
}
:deep(.van-index-anchor){
  padding-left: 25rem;
  font-size: 18rem;
  background-color: #ebebeb;
}
.city {
  padding: 10rem 30rem 0 0;
  background-color: #f5f5f5;
  h1{
    background-color: #ebebeb;
    font-size: 14rem;
    padding: 5rem 0 5rem 10rem;
  }
  .bighot {
      display: flex;
      flex-wrap: wrap;
    .hot{
      .hcity{
        margin: 10rem 0 10rem 14rem;
        width: 100rem;
        height: 30rem;
        font-size: 15rem;
        color: #333;
        background-color: #fff;
        border: 1rem solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .text{
    margin-left: 15rem;
    padding: 10rem 0 10rem;
    font-size: 15rem;
    border-bottom: 1rem solid #c8c7cc;
  }
}
</style>
